.carousel {
  position: relative;
}

.content {
  position: relative;
  display: grid;
  align-items: center;
}

.imageWrapper {
  position: relative;
  display: grid;
  grid-template-columns: 100%;
  cursor: grab;
  touch-action: none;

  &[data-dragging='true'] {
    cursor: grabbing;
  }
}

.canvasWrapper {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  user-select: none;
  aspect-ratio: var(--aspectRatio);
  isolation: isolate;
}

.canvas {
  position: relative;
}

.placeholder {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  transition: opacity 1s ease;
  opacity: 1;
  pointer-events: none;
  position: relative;
  z-index: var(--zIndex1);

  &[data-loaded='true'] {
    opacity: 0;
  }
}

.button {
  border: 0;
  margin: 0;
  background: none;
  width: 70px;
  aspect-ratio: 1 / 1;
  grid-area: 1 / 1;
  position: absolute;
  z-index: var(--zIndex3);
  cursor: pointer;
  display: grid;
  place-items: center;

  &::before {
    content: '';
    position: absolute;
    inset: 0;
    transition-property: background, box-shadow;
    transition-duration: var(--durationM);
    transition-timing-function: var(--bezierFastoutSlowin);
    clip-path: polygon(
      0 0,
      100% 0,
      100% calc(100% - 12px),
      calc(100% - 12px) 100%,
      0 100%
    );
  }

  &:hover::before {
    background: rgb(var(--rgbWhite) / 0.1);
  }

  & svg {
    position: relative;
    left: var(--offset);
    fill: rgb(var(--rgbWhite));
  }

  @media (--mediaMobile) {
    display: none;
  }

  &[data-prev='true'] {
    --offset: -2px;

    left: var(--spaceM);
  }

  &[data-next='true'] {
    --offset: 2px;

    right: var(--spaceM);
  }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--spaceS);
}

.navButton {
  --navButtonSize: 10px;
  --buttonColor: rgb(var(--rgbText) / 0.2);

  background: none;
  border: 0;
  margin: 0;
  padding: var(--spaceM);
  cursor: pointer;

  &[aria-pressed='true'] {
    --buttonColor: var(--colorTextBody);
  }

  &::after {
    content: '';
    display: block;
    border-radius: 50%;
    width: var(--navButtonSize);
    height: var(--navButtonSize);
    background: var(--buttonColor);
    transition-property: background, box-shadow;
    transition-duration: var(--durationL);
    transition-timing-function: var(--bezierFastoutSlowin);
  }
}
